<template>
	<view class="content">
		<swiper class="swiper" :indicatorDots='true' :autoplay='true' :interval='5000' :circular='true'>
			<swiper-item>
				<image :src="data.pImgBig"></image>
			</swiper-item>
		</swiper>
		<view class="title">
			<h2>{{data.pName}}</h2>
			<span>{{data.userIntended}}</span>
		</view>
		<view class="detail">
			<h2>商品详情</h2>
			<!--****新增视频*****-->
			<view class="video" v-if="data.pVideoUrl">
				<video :src="data.pVideoUrl" 
					object-fit="cover">
				</video>
			</view>
			<view class="text" v-html="data.pJsonContext"></view>
		</view>
		<view class="fixed">
			<view class="service">
				<li @tap='serve'><icon class="icon-service"></icon>客服</li>
				<li @tap="switchTab"><icon class="icon-cart"></icon>购物车<span>{{shoppingCartNum}}</span></li>
			</view>
			<view class="but">
				<span @tap="show=true">加入购物车</span>
				<span @tap="submit">立即预定</span>
			</view>
		</view>
		
		<van-popup :show="show" position="bottom" @click-overlay="show=false">
			<view class="cart">
				<view class="nub">
					<text>数量</text>
					<view class="add">
						<van-stepper :value="num" @change='onChange'/>
					</view>
					<!-- <view class="close"><icon class="icon-unusual"></icon></view> -->
				</view>
				<view class="but" @tap="addCart">确定</view>
			</view>
		</van-popup>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				pid:null,
				data:{},
				shoppingCartNum:0,
				num:1
			}
		},
		onLoad(e) {
			this.pid = Number(e.id)
			this.query()
		},
		methods: {
			serve(){
				wx.openCustomerServiceChat({
					//企业微信的企业id
					corpId: 'ww7b8cdcbd40000602',
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc92cec6065707b919'
					},
					success: (e) => {
						console.log('e', e)
					},
					fail: (err) => {
						console.log('err', err)
					}
				})
			},
			query(pid){
				this.$api({
					url:`/product/detail/${this.pid}`,
					method: "POST",
				}).then(res=>{
					this.data=res.data
					this.shoppingCartNum = res.map.shoppingCartNum
				})
			},
			onChange(event){
				this.num = event.detail
			},
			addCart(){
				this.$api({
					url:`/sc/add`,
					method: "POST",
					data:{
						pid:this.pid,
						num:this.num
					},
					content:'application/x-www-form-urlencoded'
				}).then(res=>{
					// @click="navigateto('../order/confirm-order')"
					this.show=false
					this.shoppingCartNum = res.map.shoppingCartNum
				})
			},
			submit(){
				uni.setStorageSync('shopList',[{...this.data,num:1,url:this.data.pImgSmall}])
				uni.navigateTo({
					url:'../order/confirm-order'
				})
				
			},
			switchTab(){
				uni.switchTab({
					url:`/pages/shop/shop`
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.video {
		video {
			width: 100%;
		}
	}
	
	.content {
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	}

	.swiper {
		width: 750rpx;
		height: 750rpx;
		background: #fff;
		overflow: hidden;
		image {
			width: 750rpx;
			height: 750rpx;
		}
		.wx-swiper-dot {
			width: 14rpx;
			height: 14rpx;
			background: rgba(220, 38, 27, 1);
			margin: 0 5rpx !important;
			&.wx-swiper-dot-active {
				background: rgba(0, 0, 0, .3);
			}
		}
	}
	
	.title {
		padding: 30rpx;
		background: #fff;
		h2 {
			color: #333;
			font-size: 32rpx;
		}
		span {
			display: block;
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.detail {
		margin: 20rpx 0 0;
		padding: 0 30rpx 30rpx;
		background: #fff;
		color: #333;
		h2 {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.text {
			font-size: 28rpx;
			margin: 20rpx 0 0;
			p {
				margin: 10rpx 0 0;
				&:first-of-type {
					margin: 0;
				}
			}
			image {
				width: 100%;
			}
		}
	}
	.cart {
		width: 100%;
		background: #fff;
		border-radius: 32rpx 32rpx 0 0;
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		.nub {
			display: flex;
			align-items: center;
			padding: 90rpx 40rpx;
			text {
				flex: 1;
				font-size: 28rpx;
				color: #666;
			}
			.add {
	
			}
		}
		.but {
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 84rpx;
			height: 84rpx;
			background: #dc261b;
			border-radius: 100rpx;
			margin: 0 30rpx;
		}
	}
	.fixed-cart {
		position: fixed;
		right: 0;
		top: 0;
		left: 0;
		bottom: 0;
		.mask {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, .4);
		}
		.close {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 40rpx;
			height: 40rpx;
			background: #d8d8d8;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100%;
			icon {
				color: #fff;
				display: flex;
				font-size: 28rpx;
			}
		}
		
	}
	
	.fixed {
		width: 750rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding-bottom: calc(env(safe-area-inset-bottom));
		.service {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-top: 2rpx solid #f1f1f1;
			padding: 0 20rpx;
			flex: 1;
			li {
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;
				font-size: 24rpx;
				color: #999;
				position: relative;
				icon {
					font-size: 40rpx;
					color: #666;
				}
				span {
					color: #fff;
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					text-align: center;
					font-size: 20rpx;
					background: #dc261b;
					border-radius: 100%;
					transform: translateX(-70%);
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}
		.but {
			display: flex;
			span {
				width: 240rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 28rpx;
				background: #ffc343;
				color: #fff;
				&:last-of-type {
					background: #dc261b;
				}
			}
		}
	}
	
</style>
